<template>
    <Header></Header>
    <Slideshow interval="5000" style="width: 100%; height: 500px" />
    <div class="content-main">
        <div class="container">
            <div class="content-view">
                <div class="header">
                    <div class="left-menu-list">
                        <div
                            @click="changeMainCategory(d, i)"
                            v-for="(d, i) in categoryNameList"
                            class="menu-item"
                            :class="{ active: d === pageState.currentMainCategory }"
                        >
                            <span>{{ d }}</span>
                            <span>Options</span>
                        </div>
                    </div>
                    <div class="right-data-count">
                        <p>
                            共
                            <span class="count">{{ pageState.currentCount }}</span>
                            个 {{ msg || "竞赛" }}
                        </p>
                    </div>
                </div>
                <div class="match-list">
                    <MatchCard :type="pageState.type" :categoryId="pageState.currentCategoryId" :data="d" v-for="d in contestDataList"></MatchCard>
                </div>
                <div @click="findMore" class="look-more">
                    <p>发现更多</p>
                </div>
            </div>
        </div>
        <div class="introduce-web">
            <div class="container">
                <div class="left-content">
                    <div class="player">
                        <div class="title">
                            <p>参赛者 <span>For Competitors</span></p>
                        </div>
                        <div class="introduce">
                            <p>
                                魁阁提供免费的赛事导航、报名和竞赛服务；参与竞赛、会议和活动，结识同好、同舟共济，将专业知识学以致用，多方面拓展能力。
                            </p>
                        </div>
                    </div>
                    <div class="organizers">
                        <div class="title">
                            <p>主办方 <span>For Organizers</span></p>
                        </div>
                        <div class="introduce">
                            <p>
                                魁阁为竞赛、会议、活动主办方提供了免费的报名系统和主页定制工具；为大型活动提供一站式管理、官网设计、数据分析、推广服务，全面提升活动品质与举办效率。
                            </p>
                        </div>
                    </div>
                    <div class="educators">
                        <div class="title">
                            <p>指导老师 <span>For Educators</span></p>
                        </div>
                        <div class="introduce">
                            <p>指导学生参赛，使用题库系统组织赛前培训，录制课程；学生在魁阁巩固知识、锻炼能力、获得奖项，达成您的培养目标。。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="app">
            <el-image src="https://cdn3.saikr.com/img/newindex/xiazaiapp_pic@2x.png?v=2"></el-image>
            <div class="inner-follow">
                <div class="content">
                    <div class="left-title">
                        <p>关注『魁阁』</p>
                    </div>
                    <div class="right-follow-list">
                        <div class="vx">
                            <div class="icon">
                                <img src="https://cdn3.saikr.com/img/news/fuwuhao_icon@2x.png?v=2024030101" alt="" />
                            </div>
                            <div class="title">
                                <p>微信服务号</p>
                            </div>
                        </div>
                        <div class="vx-video">
                            <div class="icon">
                                <img src="https://cdn3.saikr.com/img/news/shipinhao_icon@2x.png?v=2024030101" alt="" />
                            </div>
                            <div class="title">
                                <p>微信视频号</p>
                            </div>
                        </div>
                        <div class="bilibili">
                            <div class="icon">
                                <img src="https://cdn3.saikr.com/img/news/bilibili_icon@2x.png?v=2024030101" alt="" />
                            </div>
                            <div class="title">
                                <p>哔哩哔哩</p>
                            </div>
                        </div>
                        <div class="xhs">
                            <div class="icon">
                                <img src="https://cdn3.saikr.com/img/news/bilibili_icon@2x.png?v=2024030101" alt="" />
                            </div>
                            <div class="title">
                                <p>小红书</p>
                            </div>
                        </div>
                        <div class="dy">
                            <div class="icon">
                                <img src="https://cdn3.saikr.com/img/news/bilibili_icon@2x.png?v=2024030101" alt="" />
                            </div>
                            <div class="title">
                                <p>抖音</p>
                            </div>
                        </div>
                        <div class="zhihu">
                            <div class="icon">
                                <img src="https://cdn3.saikr.com/img/news/zhihu_icon@2x.png?v=2024030101" alt="" />
                            </div>
                            <div class="title">
                                <p>知乎</p>
                            </div>
                        </div>
                        <div class="wb">
                            <div class="icon">
                                <img src="https://cdn3.saikr.com/img/news/weibo_icon@2x.png?v=2024030101" alt="" />
                            </div>
                            <div class="title">
                                <p>微博</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> -->
        <div class="vision">
            <div class="container">
                <div class="left-introduce">
                    <div class="title">
                        <p>魁阁的愿景</p>
                    </div>
                    <div class="introduce">
                        <p>
                            魁阁致力于实现优秀的报名系统，助力全领域赛事、会议及活动的报名与信息呈现，为广泛开展的校园竞赛和活动打通渠道、节省成本、提升品质；为大型活动提供更多增值服务，协助主办方举办更大规模、更具深度的活动，为人才培养出一份力。
                        </p>
                        <p>
                            魁阁汇聚了来自全国高校、各大赛事组委会超过30个类别的40000多个竞赛；大量学术交流、行业讲座、志愿者、社会实践活动在魁阁开展，为大学生提供更广阔的视野。
                        </p>
                    </div>
                    <!-- <div class="bth-list">
                        <div class="post-match">
                            <p @click="$router.push('/publish-contest')">发布竞赛</p>
                        </div>
                        <div class="post-activity">
                            <p @click="$router.push('/publish-events')">发布活动</p>
                        </div>
                    </div> -->
                </div>
                <div class="right-img">
                    <el-image src="https://cdn3.saikr.com/img/newindex/chatu1_pic@2x.png" style="width: 544; height: 456px"></el-image>
                </div>
            </div>
        </div>
        <div class="banner">
            <img src="../assets/image/banner.png" style="transform: scale(0.8); opacity: 0.7" />
        </div>
        <Footer></Footer>
        <FixedMenu></FixedMenu>
    </div>
</template>

<script setup lang="ts">
import Header from "@/components/index/Header.vue";
import MatchCard from "@/components/index/MatchCard.vue";
import Footer from "@/components/index/Footer.vue";
import FixedMenu from "@/components/index/FixedMenu.vue";
import Slideshow from "@/components/contests/Slideshow.vue";
import route from "@/router/index";
import { useRouter } from "vue-router";
import { findIndexNumber, getHomeDataAPI, getInfo } from "@/api/home";
import { onMounted, reactive, computed, ref } from "vue";
import type { currentActiveDataType, homeCategoryType, pageStateType } from "@/types/index.d.ts";
import { homeResultDataType } from "@/types/api";

const router = useRouter();
const homeData = ref<homeResultDataType>({});
const currentActiveData = ref<currentActiveDataType>({});
const pageState = reactive<pageStateType>({
    currentMainCategory: "竞赛",
    currentCategoryId: 0,
    slideshowList: [],
    currentCount: 0,
    contestCountObj: {},
    type: 0,
});

function findMore() {
    if (pageState.currentMainCategory === "竞赛") {
        router.push("/contests");
    } else if (pageState.currentMainCategory === "文章") {
        router.push("/blog");
    } else {
        router.push("/events");
    }
}
// 切换分类 展示的 文字
const msg = ref("");
function changeMainCategory(categoryName: homeCategoryType, index: number) {
    msg.value = categoryName;
    pageState.currentMainCategory = categoryName;
    pageState.currentCount = Object.values(pageState.contestCountObj)[index];
    if (categoryName === "竞赛") {
        pageState.type = 0;
    } else if (categoryName === "活动") {
        pageState.type = 1;
    } else {
        pageState.type = 2;
    }
    const showDataMap = {
        竞赛: "indexContestList",
        活动: "indexActivityList",
        文章: "indexBlogList",
    };
    currentActiveData.value.contestDataData = homeData.value[showDataMap[categoryName]];
    currentActiveData.value.count = currentActiveData.value.contestDataData.length;
}

function initCurrentActiveData() {
    currentActiveData.value.categoryNameList = ["竞赛", "活动", "文章"];
    currentActiveData.value.contestDataData = homeData.value.indexContestList;
    currentActiveData.value.count = homeData.value.indexContestList?.length;
}

async function getContestCount() {
    const res = await findIndexNumber();
    pageState.contestCountObj = res.data.data;
    pageState.currentCount = Object.values(pageState.contestCountObj)[0];
}

onMounted(async () => {
    // 获取首页数据
    const res = await getHomeDataAPI();
    homeData.value = res.data.data;
    getContestCount();
    initCurrentActiveData();
});

// 主分类
const categoryNameList = computed(() => {
    return currentActiveData.value.categoryNameList;
});
// 展示活动列表
const contestDataList = computed(() => {
    return currentActiveData.value.contestDataData;
});
// 活动数量
const contestCount = computed(() => {
    return currentActiveData.value.count;
});
</script>

<style lang="scss" scoped>
:deep(.el-carousel__container) {
    height: 100%;
}
.content-main {
    background: #fafafa;
    > .container {
        > div {
            padding: 50px 0;
        }
        .content-view {
            > .header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px solid #ccc;
                .left-menu-list {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    flex-basis: 50%;
                    > .menu-item {
                        font-size: 24px;
                        color: #666;
                        padding: 10px 20px;
                        letter-spacing: 1px;
                        cursor: pointer;
                        span {
                            font-size: 16px;
                        }
                    }
                    .active {
                        color: #000;
                        font-weight: bold;
                        border-bottom: 5px solid #000;
                    }
                }
                .right-data-count {
                    font-size: 16px;
                    color: #666;
                    .count {
                        color: $main-color;
                        font-size: 26px;
                        margin: 0 1px;
                    }
                }
            }
            .category-list {
                margin: 10px 0;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                > .category-item {
                    width: fit-content;
                    min-width: 80px;
                    height: 40px;
                    margin: 0 5px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: #fff;
                    border-radius: 10px;
                    cursor: pointer;
                    border: 1px solid #e1e1e1;
                    padding: 10px;
                    &:hover {
                        border: 1px solid #000;
                    }
                }
                .active {
                    border: 1px solid #000;
                }
            }
            .match-list {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                flex-wrap: wrap;
                > div:first-child {
                    margin-left: 0;
                }
            }
            .look-more {
                width: 160px;
                height: 36px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #fff;
                border: 1px solid #eaeaea;
                border-radius: 20px;
                margin: 0 auto;
                margin-top: 30px;
                cursor: pointer;
            }
        }
    }
    .introduce-web {
        width: 100%;
        background: url("https://cdn3.saikr.com/img/newindex/bg1_pic@2x.png") no-repeat;
        background-size: cover;
        .container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 100%;
            .left-content {
                width: 100%;
                height: 100%;
                display: flex;
                > div {
                    margin: 30px;
                    .title {
                        width: 350px;
                        padding: 5px;
                        padding-left: 10px;
                        border-left: 3px solid $main-color;
                        font-size: 20px;
                        color: #fff;
                        background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, $main-color);
                        span {
                            font-size: 16px;
                            color: #f8f8f8;
                            margin-left: 5px;
                        }
                    }
                    .introduce {
                        margin-top: 20px;
                        font-size: 16px;
                        line-height: 1.5;
                        color: #333;
                    }
                }
            }
        }
    }
    .app {
        width: 1200px;
        height: 529px;
        margin: 50px auto;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        .inner-follow {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
            height: 100px;
            background: #fff;
            border-radius: 20px;
            .content {
                padding: 30px 50px;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                height: 100%;
                .left-title {
                    font-size: 28px;
                    color: $main-color;
                }
                .right-follow-list {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    > div {
                        margin-left: 20px;
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        font-size: 16px;
                        transition: color 0.1s ease-in;
                        cursor: pointer;
                        &:hover {
                            color: $main-color;
                        }
                        .icon {
                            width: 30px;
                            height: 30px;
                            margin-right: 5px;
                        }
                    }
                }
            }
        }
    }
    .vision {
        padding: 50px 0;
        .container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .left-introduce {
                flex-basis: 50%;
                .title {
                    font-size: 28px;
                    padding-bottom: 20px;
                    border-bottom: 5px solid $main-color;
                }
                .introduce {
                    font-size: 16px;
                    color: #333;
                    line-height: 26px;
                    font-weight: 300;
                    p {
                        margin: 30px 0;
                    }
                }
                .bth-list {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    > div {
                        width: 140px;
                        height: 35px;
                        border: 1px solid #000;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-right: 20px;
                        border-radius: 5px;
                        font-weight: bold;
                        transition: all 0.1s ease-in;
                        color: #000;
                        &:hover {
                            color: #fff;
                            background: $main-color;
                        }
                    }
                }
            }
        }
    }
    .banner {
        padding: 50px 0;
    }
}
</style>
